
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css" />
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
</head>

<body style="
      margin: 0;
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    ">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>

    <script type="text/javascript">
        Cesium.Ion.defaultAccessToken =
            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M";
        const viewer = new Cesium.Viewer("map", {});
        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.globe.depthTestAgainstTerrain = true;

        function radarPrimitiveMaterialProperty(option) {
            this.opts = {
                color: Cesium.Color.RED,
                duration: 2000,
                time: new Date().getTime(),
                repeat: 30,
                offset: 0,
                thickness: 0.3,
            };
            this.opts = Object.assign(this.opts, option);
            this._definitionChanged = new Cesium.Event();
            this._color = undefined;
            this._colorSubscription = undefined;
            this.color = this.opts.color;
            this.duration = this.opts.duration;
            this._time = this.opts.time;
        }

        Object.defineProperties(radarPrimitiveMaterialProperty.prototype, {
            isConstant: {
                get: function () {
                    return false;
                },
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                },
            },
            color: Cesium.createPropertyDescriptor("color"),
        });

        radarPrimitiveMaterialProperty.prototype.getType = function (time) {
            return "radarPrimitive";
        };
        radarPrimitiveMaterialProperty.prototype.getValue = function (
            time,
            result
        ) {
            if (!Cesium.defined(result)) {
                result = {};
            }
            result.color = Cesium.Property.getValueOrClonedDefault(
                this._color,
                time,
                Cesium.Color.WHITE,
                result.color
            );
            result.time =
                ((new Date().getTime() - this._time) % this.duration) /
                this.duration /
                10;
            result.repeat = this.opts.repeat;
            result.offset = this.opts.offset;
            result.thickness = this.opts.thickness;
            return result;
        };
        radarPrimitiveMaterialProperty.prototype.equals = function (other) {
            return (
                this === other ||
                (other instanceof radarPrimitiveMaterialProperty &&
                    Property.equals(this._color, other._color))
            );
        };

        Cesium.radarPrimitiveMaterialProperty = radarPrimitiveMaterialProperty;
        Cesium.Material.radarPrimitiveType = "radarPrimitive";
        Cesium.Material.radarPrimitiveSource =
            "uniform vec4 color;\n\
                        uniform float repeat;\n\
                        uniform float offset;\n\
                        uniform float thickness;\n\
                        czm_material czm_getMaterial(czm_materialInput materialInput){\n\
                            czm_material material = czm_getDefaultMaterial(materialInput);\n\
                            float sp = 1.0/repeat;\n\
                            vec2 st = materialInput.st;\n\
                            float dis = distance(st, vec2(0.5));\n\
                            float m = mod(dis + offset-time, sp);\n\
                            float a = step(sp*(1.0-thickness), m); \n\
                            material.diffuse = color.rgb;\n\
                            material.alpha = a * color.a;\n\
                            return material;\n\
                        }";

        Cesium.Material._materialCache.addMaterial(
            Cesium.Material.radarPrimitiveType,
            {
                fabric: {
                    type: Cesium.Material.radarPrimitiveType,
                    uniforms: {
                        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                        //   image: Cesium.Material.radarPrimitiveImage,
                        time: 0,
                        repeat: 30,
                        offset: 0,
                        thickness: 0.3,
                    },
                    source: Cesium.Material.radarPrimitiveSource,
                },
                translucent: function (material) {
                    return true;
                },
            }
        );

        var position = Cesium.Cartesian3.fromDegrees(114, 35, 750000.0);
        var heading = Cesium.Math.toRadians(135);
        var pitch = Cesium.Math.toRadians(0);
        var roll = Cesium.Math.toRadians(0);
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
            position,
            hpr
        );

        //创建圆锥实体
        var cylinder = viewer.entities.add({
            name: "Red cone",
            position: Cesium.Cartesian3.fromDegrees(114, 35, 500000.0),
            orientation: orientation,
            cylinder: {
                length: 500000,
                topRadius: 0,
                bottomRadius: 50000,
                topSurface: true, //新增参数，控制顶部是否渲染
                bottomSurface: true, //新增参数，控制底部是否渲染
                material: new Cesium.radarPrimitiveMaterialProperty({
                    color: Cesium.Color.CORAL,
                    thickness: 0.1,
                }),
            },
        });
        viewer.zoomTo(cylinder);
    </script>
</body>

</html>